<template>
    <MenuPage
        :showtitle="!('experiment,videoExp,coursewareExp').includes($route.name)"
        :columns="experCol"
        :data="expSceneList"
        :page.sync="expScenePage"
        :size.sync="expScenePageSize"
        :total="expSceneTotal"
        :loading="sceneListLoading"
        @queryFun="getExperData">
        <template slot="search">

            <!-- <Poptip
            confirm
            transfer
            title="确定将所有的课件设置为自学吗"
            @on-ok="setAllExpSelfType(1)"
            class="ml10"
            >
            <Button
                type="primary"
                icon="ios-create-outline"
                :disabled="selectNotSelfExpers.length === 0"
                >批量设为自学</Button
            >
            </Poptip>
            <Poptip
            confirm
            transfer
            title="确定将所有的课件设置为非自学吗"
            @on-ok="setAllExpSelfType(0)"
            class="ml10"
            >
            <Button
                type="primary"
                icon="ios-create-outline"
                :disabled="selectIsSelfExpers.length === 0"
                >批量设为非自学</Button
            >
            </Poptip> -->
<!--            <Divider type="vertical" />-->
            <Checkbox v-model="createByMe" @on-change="debounceQuery"
            >由我创建</Checkbox
            >
            <Select filterable
            clearable
            placeholder="课件用途"
            v-model="isSelfType"
            style="width: 150px; margin-left: 15px"
            @on-change="changePage(1)"
            >
              <Option :value="Number(value)" v-for="(label,value)  in selftypeMap" :key="value">{{label}}</Option>
            </Select>

            <Select filterable
            v-if="$route.path.includes('experiment')"
            clearable
            placeholder="请选择部署状态"
            v-model="selectDeployStatus"
            style="width: 150px; margin-left: 15px"
            @on-change="debounceQuery"
            >
            <i-option value="10">未部署</i-option>
            <i-option value="3">部署成功</i-option>
            <i-option value="9">部署中</i-option>
            <i-option value="6">部署失败</i-option>
            </Select>
            <!-- <Select filterable
            clearable
            placeholder="是否自学"
            v-model="isSelf"
            style="width: 150px; margin-left: 15px"
            @on-change="expSceneOnChange(1)"
            >
            <i-option :value="0">否</i-option>
            <i-option :value="1">是</i-option>
            </Select> -->
            <Select filterable clearable v-model="labelExp" placeholder="标签" style="width: 150px;margin-left:15px;"  :max-tag-count="2" 		 @on-change="debounceQuery(1)">
                        <Option v-for="(value,key) in expClassifyTag" :value="value.value" :key="key">{{value.value}}</Option>
                    </Select>
            <!-- <Select filterable clearable placeholder="课件模式" v-model="selectExperType" style="width: 150px;margin-left: 15px;" @on-change="changeExperType">
                        <Option value="0">实操课件</Option>
                        <Option value="1">理论课件</Option>
                        <Option value="2">文本课件</Option>
                    </Select> -->
            <Input
            clearable
            v-model.trim="searchSceneNameValue"
            placeholder="请输入课件名称"
            style="width: 150px; margin-left: 15px"
            @on-change="debounceQuery"
            />
          <Button type="primary" ghost class="md-add-jh" @click="creatExperBtn">
            <i class="el-icon-edit"></i>
            创建
          </Button>
            <Button
            style="height: 32px; margin-left: 5px"
            ghost
            type="primary"
            @click="refreshScene()"
            ><i class="el-icon-refresh-right"
            /></Button>
        </template>
        <template slot="content">
            <div class="filter-wrap">
                <tag-select
                  title="难度"
                  :current="selectDifficult"
                  :data="diffArr"
                  @on-change="changeDiff"
                ></tag-select>
                <Divider style="margin: 15px 0px" />
                <tag-select
                  title="方向"
                  :current="directionModelLevel1"
                  ref="directionType"
                  :data="directionArr"
                  @on-change="changeTypeLevel1"
                  @height-change="updateTableHei"
                ></tag-select>
                <Divider style="margin: 15px 0px" />
                <tag-select
                  title="类型"
                  :current="directionModel"
                  ref="directionType"
                  :data="showTypeArr"
                  @on-change="changeType"
                  @height-change="updateTableHei"
                ></tag-select>
                <Divider style="margin: 15px 0px" />
                <!-- <tag-select
                  title="可见范围"
                  :current="isPublic"
                  :data="visibilityArr"
                  @on-change="changeIsPublic"
                ></tag-select>
                <Divider style="margin: 15px 0px" /> -->
<!--                <tag-select-->
<!--                  title="标签"-->
<!--                  :current="labelExp"-->
<!--                  :data="expClassifyTag"-->
<!--                  @on-change="changeLabelExp"-->
<!--                ></tag-select>-->
<!--                <Divider style="margin: 15px 0px" />-->
              </div>
        </template>

      <template>
        <Modal v-model="selftypeModel" :title="'修改课件用途['+uptSelftypeInfo.ecname+']'"  :mask-closable="false">
          <label style="margin-right: 15px;">{{ $t('课件用途') }}:</label>
          <RadioGroup v-model="uptSelftypeInfo.selfType">
            <Radio :label="Number(value)" v-for="(label,value)  in selftypeMap" :key="value">{{label}}</Radio>
          </RadioGroup>
          <template #footer>
            <Button  @click="cancelSelftype" style="color: #515a6e;">取消</Button>
            <Button type="primary" @click="setSelfType">确定</Button>
          </template>
        </Modal>
      </template>
    <Modal
      v-model="subscriberModal"
      :title="'使用者列表(' + curCourseName + ')'"
      footer-hide
      :mask-closable="false"
    >
      <Table
        border
        :columns="subscriberCol"
        :data="courseSubscriber"
        :height="400"
      ></Table>
      <!-- <Table
        border
        :columns="subscriberCol"
        :data="userData.list"
        :max-height="600"
      ></Table>
      <Page
        :total="userData.total"
        :page-size="queryParams.rows"
        :current="queryParams.page"
        style="text-align: center; margin-top: 10px"
        v-show="userData.total > 10"
        show-total
        show-elevator
        @on-change="changeUserListPage"
      /> -->
    </Modal>
</MenuPage>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { mapMutations } from 'vuex';
import { experType,getSelLabelType } from '@/api/dict.js';
import {
    getExpList,
    delExper,
    getExperSubscriber,
    modifyExper,
    setAllExpSelfType
} from '@/api/selfStudy/courseExp.js';
import defaultImg from '@/assets/globalIcon/course.jpg';
import { debounce } from '@/libs/utils';
import {
    diffMixin,
    typeAndDirectionMixin,
    imagePathDealMixin,
    deployStatusMixin,
    experTypeMixin,
    visibleMixin
} from '@/mixin/study';
import TagSelect from '@/components/tagSelect/tagSelect';
export default {
    name: 'CreatExper',
    components: {
        TagSelect,
    },
    mixins: [
        diffMixin,
        typeAndDirectionMixin,
        imagePathDealMixin,
        deployStatusMixin,
        experTypeMixin,
        visibleMixin
    ],
    data() {
        return {
        
          // 课件类型
          experTypebyroute:['experiment','videoExp','coursewareExp'].indexOf(this.$route.name),
          
          diffArr: [{
					key: 'Simple',
					value: '简单',
				}, {
					key: 'Medium',
					value: '中等',
				}, {
					key: 'Hard',
					value: '较难',
                }],
                queryParams: {
					page: 1,
					rows: 10,
					ecid: ''
				},
                userData: {
					list: [],
					total: 0
            },
                labelList:[], // 标签
            // 用户信息
            USER_ID: '',
            isRootDesinger: false,
            showProjectSelect: false,
            defaultImg, // 课件的默认图片
            // 页面设置
            fullHeight: document.documentElement.clientHeight,
            fullWidth: document.documentElement.clientWidth,
            //				contentHei: 'auto',
            setTableHei: 'auto',
            spanNum: 4,
            getWidth: 0,
            marginLeft: 'auto',
            marginRight: 'auto',
            setExperHie: '0',
            setExperWid: 'auto',
            setImgHei: '145px',
            // 课件数据
            expSceneList: [],
            selectExpers: [],
            expScenePage: 1,
            expScenePageSize: 10,
            isPublic: 'All',
            labelExp: 'All',
            expSceneTotal: 0,
            sceneListLoading: false,
            experCol: [
                // {
                //     type: 'selection',
                //     width: 60,
                //     align: 'center'
                // },
                {
                    type:'link',
                    title: '名称',
                    key: 'ecname',
                    tooltip: true,
                    width: 150,
                    placement: 'top-left',
                    fun: this.goExperDetail
                },
                {
                    title: '难度',
                    key: 'difficulty',
                    minWidth: 60,
                    // filter: (difficulty) => {
                    //     return this.handleDiff(difficulty);
                    // }
                    render: (h, params) => {
                        return h('span', this.handleDiff(params.row.difficulty))
                    }
                },
                {
                    title: '课时',
                    key: 'hours',
                    minWidth: 60,
                    // filter: (hours) => {
                    //     return hours;
                    // }
                    render: (h, params) => {
                        return h('span', params.row.hours)
                    }
                },
                {
                    title: '部署状态',
                    key: 'deployStatus',
                    tooltip: true,
                    minWidth: 60,
                    placement: 'top-left',
                    show: (data) => {
                        return this.$route.path.includes('experiment')
                    },
                    setColor: (deployStatus) => {
                        return this.filterDeployStatus(deployStatus, 'color');
                    },
                    filter: (deployStatus) => {
                        return this.filterDeployStatus(deployStatus, 'text');
                    }
                    // render: (h, params) => {
                    //     let deployStatus = params.row.deployStatus
                    //     return h('span', {
                    //         style: {
                    //             color: this.filterDeployStatus(deployStatus, 'color')
                    //         }
                    //     }, this.filterDeployStatus(deployStatus, 'text'))
                    // }
                },
                {
                    title: '方向',
                    minWidth: 60,
                    key: 'direction',
                    tooltip: true,
                    // filter: (direction) => {
                    //     return this.handleDirection(direction);
                    // },
                    render: (h, params) => {
                        return h('span', this.handleDirection(params.row.direction))
                    }
                },
                {
                    title: '类型',
                    key: 'typeCode',
                    tooltip: true,
                    minWidth: 60,
                    // filter: (typeCode) => {
                    //     return this.handleCodeType(typeCode);
                    // },
                    render: (h, params) => {
                        return h('span', this.handleCodeType(params.row.typeCode))
                    }
                },
                {
                    title: '模式',
                    key: 'expType',
                    // filter: (expType) => {
                    //     return this.handleExperType(expType);
                    // },
                  show: (data) => {
                    return false
                  },
                    tooltip: true,
                    minWidth: 60,
                    render: (h, params) => {
                        return h('span', this.handleExperType(params.row.expType))
                    }
                },
                {
                    title: '测试状态',
                    key: 'testStatus',
                    // filter: (testStatus) => {
                    //     return testStatus ? '测试通过' : '未测试';
                    // },
                  show: (data) => {
                    return this.$route.path.includes('experiment')
                  },
                    tooltip: true,
                    minWidth: 60,
                    render: (h, params) => {
                        let testStatus = params.row.testStatus ? '测试通过' : '未测试';
                        return h('span', testStatus)
                    }
                },
                {
                    // type: 'Tag',
                    title: '课件用途',
                    key: 'selfType',
                    minWidth: 60,
                     placement: 'top-right',
                    // filter: (selfType) => {
                    //     return selfType === 1 ? '是' : '否';
                    // },
                    // setColor: (selfType) => {
                    //     return selfType === '1' ? '#307CED' : 'rgba(255,255,255,0.4000)';
                    // },
                    // tooltip: true,
                    render: (h, params) => {

                        let bType=['warning','info','success']
                        
                        let type = bType[params.row.selfType]||'primary'

                        return h(
                          'Button',
                          {
                            props: {
                              size: 'small',
                              type: type
                            },
                            style: {
                              cursor: 'pointer!important',
                            },
                            on:{
                              click: () => {
                                this.openSelftype(params.row);
                              },
                            }
                          },
                          this.selftypeMap[params.row.selfType]
                      )
                      
                      
                        return h(
                            'Poptip',
                            {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: `确认设为${params.row.selfType === 1 ? '非自学' : '自学'
                                        }`
                                },
                                on: {
                                    'on-ok': () => {
                                        this.setSelfType(params.row);
                                    }
                                }
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        class:
                                            params.row.selfType === 1
                                                ? 'status-yes-btn'
                                                : 'status-no-btn',
                                        props: {
                                            size: 'small',
                                            type: params.row.selfType === 1 ? 'primary' : 'error'
                                            // color:
                                            //     params.row.selfType === 1
                                            //         ? '#307CED'
                                            //         : 'rgba(255,255,255,0.4000)'
                                        },
                                        style: {
                                            cursor: 'pointer!important',
                                            // border: 'none!important',
                                            // margin: 0,
                                            // color: '#fff',
                                            background:
                                                params.row.selfType === 1
                                                    ? 'var(--status-yes)'
                                                    : 'var(--status-no)'
                                        }
                                    },
                                    params.row.selfType === 1 ? '是' : '否'
                                )
                            ]
                        );
                    }
                },
                {
                    // type: 'Tag',
                    title: '使用次数',
                    key: 'subscriberNum',
                    // minWidth: 80,
                     placement: 'top-right',
                    show: (data) => {
                      return this.$route.path.includes('experiment')
                    },
                    // fun: this.showSubscriberModal,
                    // filter: (subscriberNum) => {
                    //     return subscriberNum || 0;
                    // },
                    // setColor: (subscriberNum) => {
                    //     return 'var(--url-color)';
                    // },
                    render: (h, params) => {
                        let subscriberNum = params.row.subscriberNum || 0
                        return h('Tag', {
                            props: {
                                color: 'rgb(48, 124, 237)',
                                type: 'border'
                            },
                            style:{
                                cursor: 'pointer!important'
                            },
                            nativeOn: {
                                click: () => {
                                    this.showSubscriberModal(params.row)
                                }
                            }
                        }, subscriberNum)
                    }
                },
               
                // { title: '创建时间', key: 'createTime', tooltip: true, minWidth: 60 },
              {
                title: '是否关联实物设备',
                key: 'isRelaDevice',
                render: (h, params) => {
                  let value = params.row.deviceBaseType
                  return h('span', {}, value?'是':'否')
                }
              },
                {
                    title: '可见范围',
                    key: 'isPublic',
                    // minWidth: 60,
                    // setColor: (isPublic) => {
                    //     return this.filterVisible(isPublic, 'color');
                    // },
                    // filter: (isPublic) => {
                    //     return this.filterVisible(isPublic, 'tetx');
                    // }
                    render: (h, params) => {
                        let isPublic = params.row.isPublic
                        return h('span', {
                            style: {
                                color: this.filterVisible(isPublic, 'color')
                            }
                        }, this.filterVisible(isPublic, 'tetx'))
                    }
                },
                {
                    title: '设计者',
                    key: 'designer',
                    tooltip: true,
                    ellipsis: true,
                    // placement: 'top-left',
                    width: 120,
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 240,
                    opList: [
                        {
                            txt: '发布',
                            disabled: (data) => {
                                return this.setReBtnStatus(data) || data.testStatus === 0;
                            },
                            on: {
                                click: (data,e) => {
                                    this.publishExper(data)
                                }
                            }
                        },
                        {
                            txt: '测试通过',
                            show: (data) => {
                              return this.$route.path.includes('experiment')
                            },
                            disabled: (data) => {
                                return (
                                    data.testStatus === 1 ||
                                    this.setReBtnStatus(data) ||
                                    data.deployStatus !== 3
                                );
                            },
                            on: {
                                click: (data,e) => {
                                    this.testedExper(data)
                                }
                            }
                        },
                        // {
                        //     txt: '设为自学',
                        //     show: (data) => {
                        //         return data.selfType === 0;
                        //     },
                        //     disabled: this.setReBtnStatus,
                        //     fun: this.setSelfType
                        // },
                        // {
                        //     txt: '设为非自学',
                        //     show: (data) => {
                        //         return data.selfType === 1;
                        //     },
                        //     disabled: this.setReBtnStatus,
                        //     fun: this.setSelfType
                        // },
                        { txt: '修改', disabled: this.setReBtnStatus, 
                            on: {
                                click: (data,e) => {
                                    this.modifyExper(data)
                                }
                            }
                        },
                        {
                            txt: '删除',
                            type: 'delete',
                            tooltip: true,
                            title: '确定要删除这个课件吗？',
                            disabled: this.setReBtnStatus,
                            on: {
                                click: (data,e) => {
                                    this.delExper(data)
                                }
                            }
                        }
                    ]
                },
                {
                    title: '操作',
                    key: 'action1',
                    width: 175,
                    placement: 'top-right',
                    show:false,
                    render: (h, params) => {
                        let { testStatus, deployStatus } = params.row
                        let setReBtnStatus = this.setReBtnStatus(params.row)
                        return h('div', {}, [
                            // h('span', {
                            //     style: {
                            //         cursor: !(setReBtnStatus || testStatus === 0) ? 'pointer' : 'not-allowed',
                            //         color: !(setReBtnStatus || testStatus === 0) ? '#307ced' : '#ccc',
                            //         'margin-right': '10px'
                            //     },
                            //     on: {
                            //         'click': () => {
                            //             console.log('====发布');
                            //         }
                            //     }
                            // }, '发布'),
                            // h('span', {
                            //     style: {
                            //         cursor: !(setReBtnStatus || testStatus == 1 || deployStatus !== 3) ? 'pointer' : 'not-allowed',
                            //         color: !(setReBtnStatus || testStatus == 1 || deployStatus !== 3) ? '#307ced' : '#ccc',
                            //         'margin-right': '10px'
                            //     },
                            //     on: {
                            //         'click': () => {
                            //             console.log('====测试通过');
                            //         }
                            //     }
                            // }, '测试通过'),
                            // h('span', {
                            //     style: {
                            //         cursor: !setReBtnStatus ? 'pointer' : 'not-allowed',
                            //         color: !setReBtnStatus ? '#307ced' : '#ccc',
                            //         'margin-right': '10px'
                            //     },
                            //     on: {
                            //         'click': () => {
                            //             console.log('====编辑');
                            //         }
                            //     }
                            // }, '编辑'),
                            // h('span', {
                            //     style: {
                            //         cursor: !setReBtnStatus ? 'pointer' : 'not-allowed',
                            //         color: !setReBtnStatus ? '#db4747' : '#ccc',
                            //         'margin-right': '10px'
                            //     },
                            //     on: {
                            //         'click': () => {
                            //             console.log('====删除');
                            //         }
                            //     }
                            // }, '删除'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                    disabled: setReBtnStatus || testStatus === 0
                                },

                                style: {
                                    color: !(setReBtnStatus || testStatus === 0) ? '#307ced' : '#ccc',
                                },
                                on: {
                                    click: () => {
                                        this.publishExper(params.row)
                                    }
                                }
                            }, '发布'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                    disabled: (setReBtnStatus || testStatus == 1 || deployStatus !== 3)
                                },

                                style: {
                                    color: !(setReBtnStatus || testStatus == 1 || deployStatus !== 3) ? '#307ced' : '#ccc',
                                },
                                on: {
                                    click: () => {
                                        this.testedExper(params.row)
                                    }
                                }
                            }, '测试通过'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                    disabled: setReBtnStatus
                                },

                                style: {
                                    color: !setReBtnStatus ? '#307ced' : '#ccc',
                                },
                                on: {
                                    click: () => {
                                        this.modifyExper(params.row)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    'ok-text': "确定",
                                    'cancel-text': "取消",
                                    type: 'error',
                                    size: 'large',
                                    title: '确定要删除这个课件吗？',
                                    transfer: true
                                },

                                style: {},
                                on: {
                                    'on-ok': () => {
                                        this.delExper(params.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        disabled: setReBtnStatus
                                    },
                                    style: {
                                        color: !setReBtnStatus ? '#db4747' : '#ccc',
                                    }

                                }, '删除')
                            ])
                        ])
                    }
                }
            ],
            createByMe: false,
            selftypeMap:{
              0:'培训',
              1:'自学',
              2:'通用',
            },
            isSelfType: '',
            selectDifficult: 'All',
            searchSceneNameValue: '',
            searchSceneDesignerValue: '',
            selectDeployStatus: 'All',
            selectExperType: '',
            directionModel: 'All',
            directionModelLevel1: 'All',
            // 缺省图
            showDefImg: true,
            showDefText: '加载中',
            showContent: false,
            //使用人数modal
            subscriberModal: false,
            curCourseName: '',
            courseSubscriber: [],
            subscriberCol: [
                {
                    title: '昵称',
                    key: 'username',
                    align: 'left',
                    ellipsis: true,
                    tooltip: true
                },
                {
                    title: '使用方式',
                    key: 'type',
                    align: 'left',
                    ellipsis: true,
                    tooltip: true
                },
                {
                    title: '使用时间',
                    key: 'createtime',
                    align: 'left'
                    //						ellipsis: true,
                    //						tooltip:true
                }
            ],
            hideDel: false,
            showMore: false,
            queryHeight: 274,
            isNeedInitQuery: false,
          selftypeModel:false,
          uptSelftypeInfo:{},
            // 获取标签
            expClassifyTag: [],
            visibilityArr: [{
                key: '0',
                value: '个人',
            }, {
                key: '1',
                value: '单位',
            }, {
                key: '2',
                value: '系统',
            }],
            // sceneListLoading:true
        }
    },
    computed: {
        expName () { // 课件名称
          if(this.$store.getters.getMenuName(this.$route.name)){
            return this.$store.getters.getMenuName(this.$route.name).substring(0,2)
          }
          return undefined
        },
        selectIsSelfExpers() {
            return this.selectExpers.filter((item) => item.selfType === 1);
        },
        selectNotSelfExpers() {
            return this.selectExpers.filter((item) => item.selfType === 0);
        },
        pageTitle () {
            //当前菜单显示名
            return this.$route.meta.title;
        },
    },
    filters: {},
    watch: {
        $route(to, from) {
            //console.log(to.path);

            this.loading = true;
            this.experTypebyroute = ['experiment','videoExp','coursewareExp'].indexOf(this.$route.name)
            this.initSearch();
            // this.getData(1, this.expScenePageSize);
        },
        // directionData(val) {
        //     if (val.length > 0) {
        //         this.changeTypeLevel1(this.directionModelLevel1);
        //     }
        // }
    },
    created() {},
    mounted () {
    
        // this.setStyle();
        // 获取用户id
        let November = sessionStorage.getItem('November');
        November = JSON.parse(encryption.SelfUseDecrypt(November));
        this.USER_ID = November.userId;
        this.isRootDesinger = November.isRootDesinger;

        let queryObj = sessionStorage.getItem('queryObj');
        if (queryObj) {
            let params = JSON.parse(queryObj);
            this.selectDifficult = params.difficulty || 'All';
            this.createByMe = params.isown;
            this.searchSceneNameValue = params.ecname;
            this.searchSceneDesignerValue = params.designer;
            this.directionModelLevel1 = params.directionModelLevel1 || 'All';
            // if (this.directionData.length > 0) {
            this.changeTypeLevel1(this.directionModelLevel1, 'init');
            // }
            this.directionModel = params.directionModel || 'All';
            this.selectDeployStatus = params.deployStatus;
            this.isPublic = params.isPublic || 'All';
            this.isSelfType = params.selfType;
            //this.selectExperType = params.expType;
            this.expScenePage = params.pageIndex || 1;
            sessionStorage.removeItem('queryObj');
        }
        this.getSelLabelType()
        this.getExperData()
        // window.onresize = () => {
        //     this.setStyle();
        // };
    },
    methods: {
         // 获取标签
			getSelLabelType () {
				getSelLabelType().then(res => {
					if (res.code == 1) {
						// this.expClassifyTag = res.data[0].dictEntryList
						this.expClassifyTag = res.data[0].dictEntryList.map(item => {
							return {
								key: item.dictname,
								value: item.dictname
								// value: item.dictid
							}
						})
					} else {
						this.$Message.error('获取标签失败，请刷新重试')
					}
				}).catch(error => {
					this.$Message.error({
						content: error,
						duration: 3,
					})
				})
			},
            // 设置高度
        setStyle () {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            // 减36 是把分页高度加上
            this.setTableHei = this.fullHeight - 60 - 52 - 36 - this.queryHeight; // 
            this.expScenePageSize = Math.floor(this.setTableHei / 96);
            console.log('🚀 this.expScenePageSize:',  this.expScenePageSize)
        },
        closeModal() {},
        updateTableHei() {
            setTimeout(() => {
                this.queryHeight = document.querySelector('.filter-wrap').offsetHeight;
                this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
            }, 600);
        },
        selectExp(selection) {
            this.selectExpers = selection;
        },
        // 课件列表
        getExperData () {
            // this.setStyle()
            if (this.requestLoading) {
                //正在请求，有新的请求
                this.hasNoExecuteRequest = true;
                return;
            }
            this.requestLoading = true;
            this.showDefImg = true;
            this.showContent = false;
            this.showDefText = '加载中';
            let params = {
                pageIndex: this.expScenePage,
                pageSize: this.expScenePageSize,
                order: 'desc',
                sortBy: 'createTime',
                isPublic: '0',
                expType: this.experTypebyroute===-1?undefined:this.experTypebyroute
            };
            if (this.selectDifficult != 'All') {
                params.difficulty = this.selectDifficult;
            }
            if (this.createByMe) {
                params.isown = this.createByMe;
            }
            if (this.isSelfType || this.isSelfType === 0) {
                params.selfType = this.isSelfType;
            }
            if (this.searchSceneNameValue != '') {
                params.ecname = this.searchSceneNameValue;
            }
            if (this.searchSceneDesignerValue != '') {
                params.designer = this.searchSceneDesignerValue;
            }
            if (this.directionModelLevel1 != 'All') {
                params.typeCode = this.directionModelLevel1;
            }
            if (this.directionModel != 'All') {
                params.typeCode = this.directionModel;
            }
            if (this.selectDeployStatus != 'All') {
                params.deployStatus = this.selectDeployStatus;
            }
            if (this.isPublic != 'All') {
                params.isPublic = this.isPublic;
            }
            if (this.labelExp != 'All') {
                params.labelList = this.labelExp
            }
            if (this.labelList.length) {
                params.labelList = this.labelList.join(';')
            }
            // if(this.selectExperType) {
            // 	params.expType = this.selectExperType
            // }
            //查询条件存储
            this.queryObj = JSON.stringify(
                Object.assign({}, params, {
                    directionModelLevel1: this.directionModelLevel1,
                    directionModel: this.directionModel
                })
            );
            getExpList(params)
                .then((data) => {
                    if (data.code == 1) {
                        let attribute = data.data;
                        let items = attribute.items;
                        //							for(let i = 0; i < items.length; i++) {
                        //								items[i].showFlag = false
                        //							}
                        this.expSceneList = items;
                        console.log('🚀 ~ file: index.vue:737 ~ .then ~ this.expSceneList:', this.expSceneList)
                        this.expSceneList.forEach((exper) => {
                            exper.direction = exper.typeCode;
                            this.getExperSubscriber(exper);
                        });
                        this.expSceneTotal = attribute.total;
                        if (this.expSceneList.length > 0) {
                            this.showDefImg = false;
                            this.showContent = true;
                        } else {
                            this.showDefImg = true;
                            this.showDefText = '暂无数据';
                            this.showContent = false;
                        }
                    } else {
                        this.showDefImg = true;
                        this.showDefText = '暂无数据';
                        this.showContent = false;
                        this.$Message.error(data.message);
                    }
                    this.requestLoading = false;
                    this.sceneListLoading = false;
                    if (this.hasNoExecuteRequest) {
                        this.changePage(1);
                        this.hasNoExecuteRequest = false;
                    }
                })
                .catch((err) => {
                    this.showDefImg = true;
                    this.showDefText = '暂无数据';
                    this.sceneListLoading = false;
                    this.requestLoading = false;
                    if (this.hasNoExecuteRequest) {
                        this.changePage(1);
                        this.hasNoExecuteRequest = false;
                    }
                    console.log(err);
                });
        },
        getExperSubscriber(exper) {
            let params = {
                ecid: exper.ecid
            };
            getExperSubscriber(params)
                .then((data) => {
                    if (data.code == 1) {
                        this.$set(
                            exper,
                            'subscriber',
                            data.attribute.dataList.map((item) => {
                                return {
                                    username: item.userName,
                                    exptname: item.exptname,
                                    type: item.resourceassignflag == 'T' ? '教学排课' : '自学收藏',
                                    createtime: item.createtime
                                };
                            })
                        );
                        this.$set(
                            exper,
                            'subscriberNum',
                            new Set(data.attribute.dataList.map((user) => user.userId)).size
                        );
                    } else {
                        this.$Message.error(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                    //this.$Message.error(error)
                });
        },
        // 鼠标移入 移出
        //			enter(key) {
        //				this.$set(this.expSceneList[key], 'showFlag', true)
        //			},
        //			leave(key) {
        //				this.$set(this.expSceneList[key], 'showFlag', false)
        //			},
        // 过滤
        getData(page, size) {
            this.sceneListLoading = true;
            this.expScenePage = page;
            this.expScenePageSize = size;
            this.getExperData();
        },
        changePage(val) {
            this.expScenePage = val;
            this.getExperData();
        },
        debounceQuery: debounce(function() {
            this.changePage(1);
        }, 500),
        changeDiff(val) {
            this.selectDifficult = val;
            this.changePage(1);
        },
        changeIsPublic(val) {
            this.isPublic = val;
            this.changePage(1);
        },
        changeLabelExp (val) {
            debugger
            console.log('------',val)
            this.labelExp = val;
            this.changePage(1);
        },
        changeType(val) {
            this.directionModel = val;
            this.changePage(1);
        },
        changeTypeLevel1(val, type) {
            this.directionModel = 'All';
            this.filterTypeWithDirection(val);
            this.directionModelLevel1 = val;
            if (type !== 'init') {
                this.changePage(1);
            }
            this.$refs.directionType && this.$refs.directionType.updateHeight();
        },
        initSearch() {
            this.labelExp = 'All'
            this.selectDifficult = 'All';
            this.createByMe = false;
            this.searchSceneNameValue = '';
            this.searchSceneDesignerValue = '';
            this.directionModel = 'All';
            this.directionModelLevel1 = 'All';
            this.filterTypeWithDirection(this.directionModelLevel1);
            this.selectDeployStatus = '';
            this.isPublic = 'All';
            this.selectExperType = '';
            this.isSelfType = '';
            // this.$refs.selectTable.clearSelect();
        },
        refreshScene() {
            this.initSearch();
            this.changePage(1);
        },
        // 按钮点击状态
        setReBtnStatus(params) {
            // console.log('🚀~ params:', params)
            let userid = params.createUserId;
            if (
                (userid === this.USER_ID || this.isRootDesinger) &&
                (params.isPublic === '1' || params.isPublic === '0')
            ) {
                return false;
            } else {
                return true;
            }
        },
        // 删除课件
        delExper(item) {
            let id = item.ecid;
            delExper(id)
                .then((data) => {
                    if (data.code == 1) {
                        this.$Message.success({
                            content: data.message,
                            duration: 3
                        });
                        this.expScenePage =
                            this.expSceneList.length == 1 && this.expScenePage > 1
                                ? this.expScenePage - 1
                                : this.expScenePage;
                        // this.$refs.selectTable.closeItem(item); //移除选中
                        this.getExperData();
                    } else {
                        this.$Message.error({
                            content: data.message,
                            duration: 3
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 创建课件
        creatExperBtn() {
            this.$router.push({
                name: 'creatExper',
                query: {
                    page: 1,
                    action: 'create',
                    type: this.experTypebyroute===-1?undefined:this.experTypebyroute
                }
            });
        },
        // 发布
        publishExper(exper) {
            modifyExper(exper.ecid, { isPublic: 1, customType: exper.customType }).then(
                ({ code, data, message }) => {
                    if (code === 1) {
                        this.$Message.info('发布成功');
                        this.getExperData();
                    } else {
                        this.$Message.error(message);
                    }
                }
            );
        },
        //测试通过
        testedExper(exper) {
            modifyExper(exper.ecid, { testStatus: 1, customType: exper.customType }).then(
                ({ code, data, message }) => {
                    if (code === 1) {
                        this.$Message.info('设置成功');
                        this.getExperData();
                    } else {
                        this.$Message.error(message);
                    }
                }
            );
        },
        cancelSelftype(){
          this.selftypeModel=false
          this.$nextTick(()=>{
            this.uptSelftypeInfo = {}
          })
        },
  
        openSelftype(data){
          this.uptSelftypeInfo = JSON.parse(JSON.stringify(data))
          this.$nextTick(()=>{
            this.selftypeModel=true
          })
        },
        //设为自学
        setSelfType() {
            let exper  = this.uptSelftypeInfo
            let type = exper.selfType
            let params = { selfType: type, ecid: exper.ecid }
            setAllExpSelfType(params).then(({ code, data, message }) => {
                    if (code === 1) {
                        this.$Message.info('设置成功');
                        this.getExperData();
                        this.cancelSelftype()
                    } else {
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        setAllExpSelfType(selfType) {
            if (this.selectExpers.length === 0) {
                return;
            }
            let selectExpers = selfType === 0 ? this.selectIsSelfExpers : this.selectNotSelfExpers;
            let ecidList = selectExpers.map((item) => item.ecid);
            setAllExpSelfType({ selfType, ecidList })
                .then(({ code, data, message }) => {
                    if (code === 1) {
                        this.$Message.info('设置成功');
                        // this.$refs['selectTable'].clearSelect();
                        this.getExperData();
                    } else {
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 编辑课件
        modifyExper(item) {
            sessionStorage.setItem('queryObj', this.queryObj);
            this.$router.push({
                name: 'creatExper',
                query: {
                    ecid: item.ecid,
                    action: 'modify',
                    type: item.expType
                }
            });
        },
        // 课件详情页
        goExperDetail(item) {
            sessionStorage.setItem('queryObj', this.queryObj);
            this.$router.push({
                name: 'experdetails',
                query: {
                    page: this.expScenePage,
                    ecid: item.ecid,
                    type: item.expType,
                    expType: item.expType,
                    form: 'createExp'
                }
            });
        },
        // 父元素阻止冒泡事件
        cancel() {},
        showSubscriberModal(item) {
            if (item.subscriber && item.subscriber.length === 0) {
                this.$Message.info({
                    content: '当前无人使用',
                    duration: 3
                });
                return false;
            }
            this.subscriberModal = true;
            this.curCourseName = item.ecname;
            this.courseSubscriber = item.subscriber;
        },
        hideDelPop() {
            this.hideDel = false;
        }
    }
};
</script>
<style scoped>
/*查询样式 ---开始*/
.filter-wrap {
  /* padding: 0 20px;
  margin-top: 20px; */
  font-size: 14px;
  color: #8f90a6;
}
/*查询样式 --- 结束*/
</style>